|
1
|
|
|
/** |
|
2
|
|
|
* @package assets |
|
3
|
|
|
*/ |
|
4
|
|
|
|
|
5
|
|
|
(function($, Symphony) { |
|
6
|
|
|
'use strict'; |
|
7
|
|
|
|
|
8
|
|
|
/** |
|
9
|
|
|
* Notify combines multiple system messages to an interface that focusses |
|
10
|
|
|
* on a single message at a time and offers a navigation to move between message. |
|
11
|
|
|
* |
|
12
|
|
|
* @name $.symphonyNotify |
|
13
|
|
|
* @class |
|
14
|
|
|
* |
|
15
|
|
|
* @param {Object} options An object specifying containing the attributes specified below |
|
16
|
|
|
* @param {String} [options.items='p.notice'] Selector to find messages |
|
17
|
|
|
* @param {String} [options.storage='symphony.notify.root'] Namespace used for local storage |
|
18
|
|
|
* |
|
19
|
|
|
* @example |
|
20
|
|
|
|
|
21
|
|
|
$('#messages').symphonyNotify(); |
|
22
|
|
|
*/ |
|
23
|
|
|
$.fn.symphonyNotify = function(options) { |
|
24
|
|
|
var objects = this, |
|
25
|
|
|
settings = { |
|
26
|
|
|
items: 'p.notice', |
|
27
|
|
|
storage: 'symphony.notify.' + Symphony.Context.get('root').replace('http://', '') |
|
28
|
|
|
}; |
|
29
|
|
|
|
|
30
|
|
|
$.extend(settings, options); |
|
31
|
|
|
|
|
32
|
|
|
/*-----------------------------------------------------------------------*/ |
|
33
|
|
|
|
|
34
|
|
|
Symphony.Language.add({ |
|
35
|
|
|
'Ignore?': false, |
|
36
|
|
|
'next': false, |
|
37
|
|
|
'at': false |
|
38
|
|
|
}); |
|
39
|
|
|
|
|
40
|
|
|
/*------------------------------------------------------------------------- |
|
41
|
|
|
Events |
|
42
|
|
|
-------------------------------------------------------------------------*/ |
|
43
|
|
|
|
|
44
|
|
|
// Attach message |
|
45
|
|
|
objects.on('attach.notify', function attachMessage(event, message, type) { |
|
46
|
|
|
var object = $(this), |
|
47
|
|
|
notifier = object.find('div.notifier'), |
|
48
|
|
|
items = notifier.find(settings.items), |
|
49
|
|
|
item, storage; |
|
50
|
|
|
|
|
51
|
|
|
notifier.trigger('attachstart.notify'); |
|
52
|
|
|
|
|
53
|
|
|
// Create item |
|
54
|
|
|
item = $('<p />', { |
|
55
|
|
|
'class': type |
|
56
|
|
|
}).html(message.replace(Symphony.Language.get('at') + ' ', '')).addClass('notice active').symphonyTimeAgo(); |
|
57
|
|
|
|
|
58
|
|
|
// Add ignore link to notices) |
|
59
|
|
|
if(!item.is('.error') && !item.is('.success') && !item.is('.protected')) { |
|
60
|
|
|
item.html(item.html() + ' <a class="ignore">' + Symphony.Language.get('Ignore?') + '</a>'); |
|
61
|
|
|
} |
|
62
|
|
|
|
|
63
|
|
|
// Add navigator |
|
64
|
|
|
$('<nav />', { |
|
65
|
|
|
text: Symphony.Language.get('next') |
|
66
|
|
|
}).hide().appendTo(item); |
|
67
|
|
|
|
|
68
|
|
|
// Load exclusion rules |
|
69
|
|
|
if(Symphony.Support.localStorage === true) { |
|
70
|
|
|
storage = (window.localStorage[settings.storage]) ? $.parseJSON(window.localStorage[settings.storage]) : []; |
|
71
|
|
|
} |
|
72
|
|
|
|
|
73
|
|
|
// Dimmed success transition |
|
74
|
|
|
if (!!type && !!~type.indexOf('success')) { |
|
75
|
|
|
setTimeout(function () { |
|
76
|
|
|
item.addClass('dimmed'); |
|
77
|
|
|
}, 10000); |
|
78
|
|
|
} |
|
79
|
|
|
|
|
80
|
|
|
// Prepend item |
|
81
|
|
|
if($.inArray(item.text(), storage) == -1) { |
|
|
|
|
|
|
82
|
|
|
items.removeClass('active'); |
|
83
|
|
|
item.addClass('active').prependTo(notifier); |
|
84
|
|
|
notifier.scrollTop(0); |
|
85
|
|
|
|
|
86
|
|
|
notifier.trigger('attachstop.notify', [item]); |
|
87
|
|
|
} |
|
88
|
|
|
else { |
|
89
|
|
|
notifier.trigger('attachcancel.notify', [item]); |
|
90
|
|
|
} |
|
91
|
|
|
}); |
|
92
|
|
|
|
|
93
|
|
|
// Detach message |
|
94
|
|
|
objects.on('detach.notify', settings.items, function detachMessage(event) { |
|
|
|
|
|
|
95
|
|
|
var item = $(this), |
|
96
|
|
|
notifier = item.parents('div.notifier'); |
|
97
|
|
|
|
|
98
|
|
|
notifier.trigger('detachstart.notify', [item]); |
|
99
|
|
|
|
|
100
|
|
|
// Prepare item removal |
|
101
|
|
|
notifier.one('movestop.notify', function(event) { |
|
|
|
|
|
|
102
|
|
|
var notifier = $(this), |
|
103
|
|
|
offset = notifier.scrollTop(); |
|
104
|
|
|
|
|
105
|
|
|
// Adjust offset |
|
106
|
|
|
if(offset > 0) { |
|
107
|
|
|
notifier.scrollTop(offset - item.outerHeight()); |
|
108
|
|
|
} |
|
109
|
|
|
|
|
110
|
|
|
// Remove item |
|
111
|
|
|
item.remove(); |
|
112
|
|
|
|
|
113
|
|
|
notifier.trigger('detachstop.notify', [item]); |
|
114
|
|
|
}); |
|
115
|
|
|
|
|
116
|
|
|
// Fade item |
|
117
|
|
|
item.animate({ |
|
118
|
|
|
opacity: 0 |
|
119
|
|
|
}, 'normal', function removeItem() { |
|
120
|
|
|
|
|
121
|
|
|
// No other items |
|
122
|
|
|
if(item.siblings().length == 0) { |
|
|
|
|
|
|
123
|
|
|
notifier.trigger('resize.notify', [$('<div />')]); |
|
124
|
|
|
} |
|
125
|
|
|
|
|
126
|
|
|
// More item |
|
127
|
|
|
else { |
|
128
|
|
|
notifier.trigger('move.notify'); |
|
129
|
|
|
} |
|
130
|
|
|
|
|
131
|
|
|
// Remove item |
|
132
|
|
|
item.remove(); |
|
133
|
|
|
notifier.trigger('detachstop.notify', [item]); |
|
134
|
|
|
}); |
|
135
|
|
|
}); |
|
136
|
|
|
|
|
137
|
|
|
// Resize notifier |
|
138
|
|
|
objects.on('resize.notify attachstop.notify', 'div.notifier', function resizeNotifer(event, item) { |
|
139
|
|
|
var notifier = $(this); |
|
140
|
|
|
|
|
141
|
|
|
// Adjust height |
|
142
|
|
|
if(!notifier.hasClass('constructing')) { |
|
143
|
|
|
var active = item || notifier.find('.active:not(:animated)'); |
|
144
|
|
|
|
|
145
|
|
|
notifier.show().animate({ |
|
146
|
|
|
height: active.innerHeight() || 0 |
|
147
|
|
|
}, 100); |
|
148
|
|
|
} |
|
149
|
|
|
}); |
|
150
|
|
|
|
|
151
|
|
|
// Count messages |
|
152
|
|
|
objects.on('attachstop.notify detachstop.notify', 'div.notifier', function toggleNavigator(event) { |
|
|
|
|
|
|
153
|
|
|
var notifier = $(this), |
|
154
|
|
|
items = notifier.find(settings.items); |
|
155
|
|
|
|
|
156
|
|
|
// Hide navigator |
|
157
|
|
|
if(items.length == 1) { |
|
|
|
|
|
|
158
|
|
|
items.find('nav').hide(); |
|
159
|
|
|
} |
|
160
|
|
|
|
|
161
|
|
|
// Show navigator |
|
162
|
|
|
else { |
|
163
|
|
|
items.find('nav').show(); |
|
164
|
|
|
} |
|
165
|
|
|
}); |
|
166
|
|
|
|
|
167
|
|
|
// Next message |
|
168
|
|
|
objects.on('click', 'nav', function switchMessage(event) { |
|
|
|
|
|
|
169
|
|
|
var nav = $(this), |
|
|
|
|
|
|
170
|
|
|
notifier = $(this).closest('div.notifier'); |
|
171
|
|
|
|
|
172
|
|
|
// Move messages |
|
173
|
|
|
notifier.trigger('move.notify'); |
|
174
|
|
|
}); |
|
175
|
|
|
|
|
176
|
|
|
// Move messages |
|
177
|
|
|
objects.on('move.notify', 'div.notifier', function moveMessage(event) { |
|
|
|
|
|
|
178
|
|
|
var notifier = $(this), |
|
179
|
|
|
current = notifier.find('.active'), |
|
180
|
|
|
next = current.next(settings.items), |
|
181
|
|
|
from = current.outerHeight(), |
|
182
|
|
|
offset; |
|
183
|
|
|
|
|
184
|
|
|
notifier.trigger('movestart.notify'); |
|
185
|
|
|
|
|
186
|
|
|
// Deactivate current message |
|
187
|
|
|
current.removeClass('active'); |
|
188
|
|
|
|
|
189
|
|
|
// Activate next message and get offset |
|
190
|
|
|
if(next.length > 0) { |
|
191
|
|
|
next.addClass('active'); |
|
192
|
|
|
offset = notifier.scrollTop() + from; |
|
193
|
|
|
} |
|
194
|
|
|
else { |
|
195
|
|
|
next = notifier.find(settings.items).first().addClass('active'); |
|
196
|
|
|
offset = 0; |
|
197
|
|
|
} |
|
198
|
|
|
|
|
199
|
|
|
// If next's height is not the same, resize first |
|
200
|
|
|
if(next.outerHeight() !== from) { |
|
201
|
|
|
notifier.trigger('resize.notify'); |
|
202
|
|
|
} |
|
203
|
|
|
|
|
204
|
|
|
// Move to next message |
|
205
|
|
|
notifier.animate({ |
|
206
|
|
|
scrollTop: offset |
|
207
|
|
|
}, 'fast', function stopMovingMessage() { |
|
208
|
|
|
notifier.trigger('movestop.notify'); |
|
209
|
|
|
}); |
|
210
|
|
|
}); |
|
211
|
|
|
|
|
212
|
|
|
// Ignore message |
|
213
|
|
|
objects.on('click', 'a.ignore', function ignoreMessage(event) { |
|
|
|
|
|
|
214
|
|
|
var ignore = $(this), |
|
215
|
|
|
item = ignore.parents(settings.items), |
|
216
|
|
|
notifier = item.parents('div.notifier'), |
|
|
|
|
|
|
217
|
|
|
text = item.text(), |
|
218
|
|
|
storage; |
|
219
|
|
|
|
|
220
|
|
|
// Store exclusion rule |
|
221
|
|
|
if(Symphony.Support.localStorage === true) { |
|
222
|
|
|
// Put in a try/catch incase we exceed storage space |
|
223
|
|
|
try { |
|
224
|
|
|
storage = (window.localStorage[settings.storage]) ? $.parseJSON(window.localStorage[settings.storage]) : []; |
|
225
|
|
|
storage.push(text); |
|
226
|
|
|
window.localStorage[settings.storage] = JSON.stringify(storage); |
|
227
|
|
|
} |
|
228
|
|
|
catch(e) { |
|
229
|
|
|
window.onerror(e.message); |
|
230
|
|
|
} |
|
231
|
|
|
} |
|
232
|
|
|
|
|
233
|
|
|
// Remove item |
|
234
|
|
|
item.trigger('detach.notify'); |
|
235
|
|
|
}); |
|
236
|
|
|
|
|
237
|
|
|
/*------------------------------------------------------------------------- |
|
238
|
|
|
Initialisation |
|
239
|
|
|
-------------------------------------------------------------------------*/ |
|
240
|
|
|
|
|
241
|
|
|
// Build interface |
|
242
|
|
|
objects.each(function initNotify() { |
|
243
|
|
|
var object = $(this), |
|
244
|
|
|
notifier = $('<div class="notifier" />').hide().prependTo(object), |
|
245
|
|
|
items = $(object.find(settings.items).get().reverse()); |
|
246
|
|
|
|
|
247
|
|
|
// Construct notifier |
|
248
|
|
|
notifier.addClass('constructing'); |
|
249
|
|
|
notifier.height(items.last().innerHeight()); |
|
250
|
|
|
items.each(function buildMessages() { |
|
251
|
|
|
var item = $(this).remove(), |
|
252
|
|
|
message = item.html(), |
|
253
|
|
|
type = item.attr('class'); |
|
254
|
|
|
|
|
255
|
|
|
object.trigger('attach.notify', [message, type]); |
|
256
|
|
|
}); |
|
257
|
|
|
|
|
258
|
|
|
// Resize notifier |
|
259
|
|
|
if(notifier.find(settings.items).length > 0) { |
|
260
|
|
|
notifier.removeClass('constructing').trigger('resize.notify'); |
|
261
|
|
|
} |
|
262
|
|
|
|
|
263
|
|
|
notifier.removeClass('constructing'); |
|
264
|
|
|
|
|
265
|
|
|
// Update relative times in system messages |
|
266
|
|
|
setInterval(function updateRelativeTimes() { |
|
267
|
|
|
$('header p.notice').symphonyTimeAgo(); |
|
268
|
|
|
}, 60000); |
|
269
|
|
|
}); |
|
270
|
|
|
|
|
271
|
|
|
/*-----------------------------------------------------------------------*/ |
|
272
|
|
|
|
|
273
|
|
|
return objects; |
|
274
|
|
|
}; |
|
275
|
|
|
|
|
276
|
|
|
})(window.jQuery, window.Symphony); |
|
277
|
|
|
|